<template>
  <el-dialog :title="option.title" :visible.sync="option.isShow" width="70%" :close-on-click-modal="false"
    @open="openDialog" @close="closeDialog('ruleForm')">
    <el-row :gutter="10">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-col :span="12">
          <el-form-item label="渠道" prop="CHANNELTYPE">
            <el-select v-model="ruleForm.CHANNELTYPE" :disabled="option.flag == 'update'" size="small" filterable clearable placeholder="请选择业务渠道">
              <el-option v-for="item in option.channelOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                :value="item.FIELDKEY"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="列数" prop="DBSEQ">
            <el-input v-model="ruleForm.DBSEQ" size="small" placeholder="请输入列数"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据库列" prop="DBCOL">
           <el-select v-model="ruleForm.DBCOL" size="small"  :disabled="option.flag == 'update'" filterable  placeholder="请选择数据库列" @change="changeDBCOL">
              <el-option v-for="item in option.DBCOLOption" :key="item.FIELDKEY" :label="item.FIELDKEY+'—'+item.FIELDVALUE"
                :value="item.FIELDKEY"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="列名称" prop="COLNAME">
            <el-input v-model="ruleForm.COLNAME" size="small" disabled placeholder="请输入列名称"></el-input>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="数据类型" prop="DATATYPE">
            <el-select v-model="ruleForm.DATATYPE" size="small" @change="changeType" filterable clearable placeholder="请输入数据类型">
              <el-option v-for="item in option.dataTypeOption" :key="item.FIELDKEY" :label="item.FIELDVALUE"
                :value="item.FIELDKEY"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="数据格式" prop="DATAFORMAT">
            <el-select v-model="ruleForm.DATAFORMAT" v-if="ruleForm.DATATYPE=='TIME'" size="small" filterable clearable placeholder="请选择数据类型">
              <el-option v-for="(item,index) in timeOption" :key="index" :label="item"
                :value="item"></el-option>
            </el-select>
            <el-select v-model="ruleForm.DATAFORMAT" v-if="ruleForm.DATATYPE=='DATE'" size="small" filterable clearable placeholder="请选择数据类型">
              <el-option v-for="(item,index) in dateOption" :key="index" :label="item"
                :value="item"></el-option>
            </el-select>
            <el-input v-model="ruleForm.DATAFORMAT" v-if="ruleForm.DATATYPE!='TIME'&& ruleForm.DATATYPE!='DATE'"  size="small"  placeholder="请输入数据格式"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="长度" prop="DATALEN">
            <el-input v-model="ruleForm.DATALEN" size="small" disabled placeholder="请输入长度"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否必输" prop="DATAMUST">
            <el-select v-model="ruleForm.DATAMUST" size="small" filterable disabled clearable placeholder="请选择是否必输">
              <el-option v-for="item in isInputOption" :key="item.key" :label="item.label"
                :value="item.key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" size="mini" @click="submitForm('ruleForm')">保存</el-button>
            <el-button @click="resetForm('ruleForm')" size="mini">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </el-dialog>
</template>

<script>
  import request from "@/common/utils/requestQC";
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import addData from "@/message/QCManage/dataCollectionManage/importDataManage/importDataManageAdd";
  import updateData from "@/message/QCManage/dataCollectionManage/importDataManage/importDataManageUpdate";

  export default {
    props: {
      option: Object
    },
    computed: {
      isShow: {
        get: function () {
          return this.option.isShow;
        },
        set: function (newValue) {
          this.option.isShow = newValue;
        }
      }
    },
    mounted() {},
    data() {
      return {
        timeOption:[
          'HH:mm:ss','HH-mm-ss','HHmmss'
        ],
        dateOption:['yyyymmdd','yyyy-mm-dd','yyyy:mm:dd'],
        isInputOption:[
          {key:'Y',label:'必输'},
          {key:'N',label:'非必输'},
        ],
        ruleForm: {
          CHANNELTYPE: '', //渠道
          DBSEQ: '', //字段在文件中的列数
          DBCOL: '', //数据库列
          COLNAME: '', //列名称
          DATAFORMAT: '', //数据格式
          DATATYPE: '', //数据类型
          DATALEN: '', //长度
          DATAMUST: '' //是否必输
        },
        rules: {
          CHANNELTYPE: [{
            required: true,
            message: '请选择渠道',
            trigger: 'change'
          }],
          DATALEN: [{
            required: true,
            message: '请选择长度',
            trigger: 'change'
          }],
          DATAMUST: [{
            required: true,
            message: '请输入是否必输',
            trigger: 'blur'
          }],
          DATATYPE: [{
            required: true,
            message: '请选择数据类型',
            trigger: 'change'
          }],
          DBSEQ: [{
            required: true,
            message: '请输入列数',
            trigger: 'blur'
          }],
          COLNAME: [{
            required: true,
            message: '请输入列名称',
            trigger: 'blur'
          }],
          DBCOL: [{
            required: true,
            message: '请输入数据库列',
            trigger: 'blur'
          }]
        },
        loading: false,
      };
    },
    created() {

    },
    methods: {
      changeType(val){
        if(val=='TIME'){
          this.ruleForm.DATAFORMAT = ''
        }
      },
      //选择数据库列的时候触发
      changeDBCOL(){
        this.ruleForm.COLNAME = ''
        this.ruleForm.DATALEN = ''
        this.ruleForm.DATAMUST = ''
        this.ruleForm.COLNAME = this.findName(this.option.DBCOLOption)
        this.ruleForm.DATALEN = this.findName(this.option.lengthOption)
        this.ruleForm.DATAMUST = this.findName(this.option.inputOption)
      },
      findName(arr){
        let data = arr.filter(item=>{
          return item.FIELDKEY == this.ruleForm.DBCOL
        })
        return data[0].FIELDVALUE
      },
      openDialog() {
        if(this.$refs['ruleForm'] != undefined){
          this.$refs['ruleForm'].clearValidate();
        }
        if (this.option.flag == 'add') {
          this.ruleForm = {
            CHANNELTYPE: '', //渠道
            DBSEQ: '', //字段在文件中的列数
            DBCOL: '', //数据库列
            COLNAME: '', //列名称
            DATAFORMAT: '', //数据格式
            DATATYPE: '', //数据类型
            DATALEN: '', //长度
            DATAMUST: '' //是否必输
          }
        } else {
          this.ruleForm = JSON.parse(JSON.stringify(this.option.row));
        }
      },
      closeDialog(formName) {
        if(this.$refs[formName] != undefined){
          this.$refs[formName].clearValidate();
        }
        // this.$refs[formName].clearValidate();
        this.$refs[formName].resetFields();
      },
      //保存
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let resBody
            resBody = this.option.flag == 'add' ? new addData() : new updateData();
            resBody.data.DBSEQ = this.ruleForm.DBSEQ
            resBody.data.DBCOL = this.ruleForm.DBCOL
            resBody.data.CHANNELTYPE = this.ruleForm.CHANNELTYPE
            resBody.data.COLNAME = this.ruleForm.COLNAME
            resBody.data.DATAFORMAT = this.ruleForm.DATAFORMAT
            resBody.data.DATATYPE = this.ruleForm.DATATYPE
            resBody.data.DATALEN = this.ruleForm.DATALEN+''
            resBody.data.DATAMUST = this.ruleForm.DATAMUST
            let response = await request(resBody);
            if (response.SYS_HEAD.ReturnCode == "000000") {
              if (this.option.flag == 'update') {
                this.$message({
                  type: 'success',
                  message: '修改成功！'
                })
              } else {
                this.$message({
                  type: 'success',
                  message: '新增成功！'
                })
              }
              this.isShow = false;
              this.$emit("refreshTable");
            } else {
              this.$message({
                type: "error",
                message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD
                  .ReturnMessage
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].clearValidate();
          this.$refs[formName].resetFields();
        }
      }
    }
  };

</script>

<style scoped>

</style>
